<!DOCTYPE html>
<html>
<head>
    <title>摸鱼计时器</title>
    <style>
        body {
            font-family: '微软雅黑';
            text-align: center;
            padding: 50px;
            background: #f0f0f0;
        }
        h1 { color: #333; }
        .timer { font-size: 40px; margin: 20px; }
        button { padding: 10px 20px; font-size: 16px; }
    </style>
</head>
<body>
<h1>🐟 摸鱼倒计时</h1>
<div class="timer" id="timer">00:00</div>
<button id="button" onclick="start()">开始摸鱼</button>
<script>
    let time = 0;
    let startRunning = false;
    let interval = null;
    function start() {
        if (!startRunning) {
            document.getElementById('button').innerText = '暂停摸鱼'
            startRunning = true;

            interval = setInterval(() => {
                time++;
                document.getElementById('timer').innerText = format(time);
            }, 1000);
        } else {
            document.getElementById('button').innerText = '开始摸鱼'
            startRunning = false;

            clearInterval(interval);
        }
    }
    function format(s) {
        const m = Math.floor(s / 60);
        const sec = s % 60;
        return `${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
    }
</script>
</body>
</html>
